<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div>
        <p class="p"></p>
        <p class="p"></p>
        <span class="p"></span>

    </div>
    <div>
        <input type="checkbox" />
        <input type="checkbox" />
        <input type="checkbox" />
    </div>

    <div id="box">
        <div name="Ford"></div>
        <div name="Jarrah"></div>
        <div name="Kwon"></div>
        <div name="Locke"></div>
        <div name="Reyes"></div>
        <div name="Shephard"></div>
    </div>
    
    <script src="d3.min.js"></script>
    <script>
       let array = [10,20,30,40,50,60,70];
       //d3.selectAll('p').data(array).text(d=>d);
       //d3.select('div').selectAll('p').data(array).text(d=>d).enter().append('p').text(d=>d);
       //array = array.slice(0,1);
       //d3.select('div').selectAll('p').data(array).exit().remove().text(d=>d);

       //const c = d3.selectAll('p').data(array);
       
        // const ps = d3.selectAll('p')
        // ps.each(function(a,b,c) {
        //     d3.select(this).text(array[b]);  
        // });

        // console.log(d3.selection());

        //d3.selectAll('input').property('checked',true);

        // array.forEach((e,i) => {
        //     d3.select(`p:nth-child(${i+1})`).text(e);
        // })

        // const ds = d3.selectAll('p').data(array,function(d,i){console.log('t',arguments);return i}).text(function(d){
        //     console.log('c',d);
        //     return d ;
        // });


        // array = [
        //     {name:'1',value:18},
        //     {name:'2',value:20},
        //     {name:'3',value:30},
        // ];

        // d3.selectAll('p').data(array, function(a,b,c){
        //     console.log(a,b,c);
        //     return a.name ;
        // }).text(d=>d);

        // const c = d3.selectAll('p').data(array,function(d,i){console.log(arguments); return 0}) ;
        // c.text(d=>d);

        // const data = [
        // {name: "Locke", number: 4},
        // {name: "Reyes", number: 8},
        // {name: "Ford", number: 15},
        // {name: "Jarrah", number: 16},
        // {name: "Shephard", number: 23},
        // {name: "Kwon", number: 42}
        // ];

        // const d = d3.selectAll("#box div")
        //     .data(data, function(d) {return d ? d.name : this.getAttribute('name'); })
        // d.text(d => d.number);


        // const c = d3.select('div:nth-child(1)').selectAll('p')
        //     .data(array,(d,i)=>d?i:i+3)
        //     .enter()
        //     .append('p')
        //     .text(d=>d) ;


        // array = ['dmc','zs','ls'] ;
        // const c = d3.selectAll('#box div').data(array);

        //array = [30];
        // const c = d3.select('div:nth-child(1)').selectAll('p,span').data(array,function(d,i){
        //     console.log(arguments)
        //     return d?i:i+3;
        // }).join('p').text(d=>d);

        // const c = d3.select('div:nth-child(1)').selectAll('p')
        //     .data(array)
        //     .join(function(){console.log(arguments);return arguments[0].append('p').style('background','#fac');},
        //           function(){console.log(arguments);return arguments[0].style('background','steelblue')},
        //           function(){console.log(arguments);return arguments[0].remove()});
        // c.text(d=>d);
        // c.style('background','#fac');


        array = [[1,2,3],[11,12,13],[21,22,23]];
        d3.select('body').selectAll('ul').data(array).join('ul').selectAll('li').data(d=>d).join('li').text(d=>d);
    </script>
</body>
</html>
